<script setup>
const slides = ref(
  Array.from({ length: 10 }, () => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    // Figure out contrast color for font
    const contrast =
      r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black" : "white";

    return { bg: `rgb(${r}, ${g}, ${b})`, color: contrast };
  })
);
</script>

<template>
  <Swiper :loop="true">
    <SwiperSlide
      v-for="(slide, idx) in slides"
      :key="idx"
    >
      {{ idx }}
    </SwiperSlide>

    <!-- useSwiper() within a swiper instance -->
    <SwiperControls />
  </Swiper>
</template>

<style></style>
